<template>
    <article class="commodity">
        <div class="commodity-label">
            <span>商品信息</span>
        </div>
        <ZWTable
            ref="commodityTableRef"
            :show-pagination="false"
            class="commodity-table"
            :option="tableOption"
            :fetch-api="fetchApi"
            tab-h="600">
        </ZWTable>
        <div class="commodity-price">
            <div class="commodity-price-item">
                <div class="price-item-label">
                    <span>商店总价：</span>
                </div>
                <div class="price-item-content">
                    {{ numberToLocaleString(info?.product_amount) }}
                </div>
            </div>
            <div class="commodity-price-item">
                <div class="price-item-label">
                    <span>运费：</span>
                </div>
                <div class="price-item-content">
                    {{ numberToLocaleString(info?.post_amount) }}
                </div>
            </div>
            <div class="commodity-price-item">
                <div class="price-item-label">
                    <span>优惠总额：</span>
                </div>
                <div class="price-item-content">
                    {{ numberToLocaleString(info?.discount_amount) }}
                </div>
            </div>
            <div class="commodity-price-item">
                <div class="price-item-label">
                    <span>实付金额：</span>
                </div>
                <div class="price-item-content price-active">
                    {{ numberToLocaleString(info?.actually_amount) }}
                </div>
            </div>
        </div>
    </article>
</template>

<script setup lang="tsx">
import { ref, computed } from 'vue';
import ZWTable from '@/components/zw/table/Table';

const props = defineProps({
    info: {
        type: Object,
        default: () => ({})
    }
});

const commodityTableRef = ref<any>();

const isNotEmpty = (value: any) => ['', undefined, null].includes(value);

const numberToLocaleString = (number: number) => {
    return !isNotEmpty(number) ? `¥ ${Number(number).toFixed(2).toLocaleString()}` : '--';
};

const formatter = (row: any, column: any, cellValue: any) => numberToLocaleString(Number(cellValue) / 100);
// 自定义表格查询接口
const fetchApi = () => {
    return new Promise(resolve => {
        const tableData = props.info.order_product.map((item: any) => {
            const sku = item.sku?.[0] ?? {};
            return {
                ...item,
                ...sku
            };
        });
        resolve({ total: tableData.length, data: tableData });
    });
};

const tableOption = computed(() => [
    {
        prop: 'product',
        label: '商品',
        width: 260,
        render({ row }: any) {
            return (
                <div class="commodity-column-info">
                    <el-image src={row.cover} preview-src-list={[row.cover]} preview-teleported></el-image>
                    <el-popover placement="top-start" title={row.external_product_name} trigger="hover" width="220px">
                        {{
                            default: () => row.sku_name,
                            reference: () => (
                                <div class="commodity-info">
                                    <div class="zw-text-ellipsis2"> {row.external_product_name} </div>
                                    <div class="zw-text-ellipsis"> {row.sku_name || '--'} </div>
                                </div>
                            )
                        }}
                    </el-popover>
                </div>
            );
        }
    },
    {
        prop: 'sell_price',
        label: '单价',
        formatter,
        width: 160
    },
    {
        prop: 'buy_qty',
        label: '数量',
        width: 120,
        showOverflowTooltip: true
    },
    {
        prop: 'discount_price',
        label: '优惠',
        formatter,
        width: 160
    },
    {
        prop: 'buy_price',
        label: '小计',
        formatter,
        width: 160
    },
    {
        prop: 'state_info',
        label: '售后',
        showOverflowTooltip: true
    }
]);

defineExpose({
    reload() {
        commodityTableRef.value?.reload();
    }
});
</script>
<style lang="scss" scoped>
.commodity {
    margin-top: 24px;
    border: 1px solid #eaeaea;
}
.commodity-label {
    padding-left: 24px;
    height: 57px;
    line-height: 57px;
    font-size: 14px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #33302d;
    margin-bottom: -18px;
}

.commodity-table > .el-table {
    border-right: 0;
    border-left: 0;
    border-bottom: 0;
}

:deep(.commodity-column-info) {
    display: flex;
    $image-width: 60px;
    gap: 10px;

    .commodity-info {
        cursor: pointer;
        width: calc(100% - $image-width);
        display: flex;
        flex-direction: column;
        align-items: stretch;
        justify-content: space-around;
        font-family: PingFangSC-Regular, PingFang SC;
        > div {
            font-size: 13px;
            color: #969696;
            line-height: 13px;
        }
        > div:first-child {
            font-size: 14px;
            color: #33302d;
            line-height: 20px;
        }
    }
    .el-image {
        flex: 0 0 $image-width;
        border-radius: 4px;
        width: $image-width;
        height: $image-width;
    }
}

.commodity-price {
    margin: 16px;
    .commodity-price-item {
        display: inline-flex;
        width: 100%;
        justify-content: end;
        align-items: center;
        font-family: PingFangSC-Regular, PingFang SC;
        color: #33302d;
        font-size: 14px;
        line-height: 22px;
        .price-item-content {
            text-align: right;
            width: 80px;
        }
    }
}

.price-active {
    color: var(--el-color-primary);
}
:global(.commodity-column-info) {
    display: grid;
    gap: 10px;
    grid-template-columns: 80px 1fr;
}

:global(.commodity-column-info > .commodity-info > div) {
    font-size: 13px;
    color: #969696;
    line-height: 13px;
}
</style>
